<template>
  <div class="">
    <el-table :data="data" style="width: 100%; overflow-x: hidden" stripe>
      <el-table-column label="用户昵称" width="180">
        <template slot-scope="scope">
          <b>{{ scope.row.nickName }}</b>
        </template>
      </el-table-column>
      <el-table-column label="提交时间" width="180">
        <template slot-scope="scope">
          <b>{{ scope.row.create }}</b>
        </template>
      </el-table-column>
      <el-table-column label="联系方式" width="180">
        <template slot-scope="scope">
          <b>{{ scope.row._id }}</b>
        </template>
      </el-table-column>
      <el-table-column label="内容">
        <template slot-scope="scope">
          <p class="content">{{ scope.row.text }}</p>
        </template>
      </el-table-column>
      <el-table-column label="回复">
        <template slot-scope="scope">
          <p class="content">{{ scope.row.replay }}</p>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot="header" slot-scope="scope">
          <el-select
            v-model="search"
            placeholder="请选择"
            @input="changeSearch($event, scope.$index)"
          >
            <el-option label="全部" value="0"> </el-option>
            <el-option label="已回复" value="1"> </el-option>
            <!-- <el-option
              v-if="$store.state.user.role != 'user'"
              label="我的建议"
              value="2"
            >
            </el-option> -->
            <el-option label="未回复" value="2"> </el-option>
          </el-select>
        </template>
        <template slot-scope="scope">
          <el-button
            type="warning"
            size="medium"
            @click.stop="show(scope.row._id, scope.$index, scope.row)"
            >查看</el-button
          >
          <el-button
            size="medium"
            type="danger"
            v-if="$store.state.user.role != 'user'"
            @click.stop="reply(scope.row._id, scope.$index, scope.row)"
            >回复</el-button
          >
          <el-button
            size="medium"
            type="danger"
            v-if="$store.state.user.role == 'user'"
            @click.stop="del(scope.row._id, scope.$index, scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="详 细"
      :visible.sync="centerDialogVisible"
      width="50%"
      center
      v-if="centerDialogVisible"
    >
      <el-descriptions :column="1">
        <el-descriptions-item label="建议">{{
          current.text
        }}</el-descriptions-item>
        <el-descriptions-item
          v-if="$store.state.user.role == 'user'"
          label="回复"
          >{{ current.replay }}</el-descriptions-item
        >
        <el-descriptions-item
          v-if="$store.state.user.role != 'user'"
          label="回复"
          ><el-input
            type="textarea"
            :autosize="{ minRows: 8 }"
            placeholder="请输入回复"
            v-model="text"
          >
          </el-input
        ></el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button
          v-if="$store.state.user.role != 'user'"
          type="primary"
          @click="replay"
          >回 复</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "SuggestTable",
  props: ["data"],
  data() {
    return {
      centerDialogVisible: false,
      text: "",
      search: "0",
      timer: "",
    };
  },
  computed: {},
  watch: {},

  methods: {
    changeSearch(e, y) {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        console.log(this.search);
        this.$emit("search", this.search);
      }, 1000);
    },
    show(x, y, z) {
      this.centerDialogVisible = true;
      this.index = y;
      this.current = z;
    },
    replay() {
      //   console.log(this.current._id,this.text);
      this.axios
        .post("/api/v1/suggest/reply", {
          pid: this.current._id,
          text: this.text,
        })
        .then((res) => {
          console.log(res);
          if (res.code == 1) {
            this.centerDialogVisible = false;
            this.msg(res, this);
            this.$emit("replay", res.data, this.index);
          }
        });
    },
    reply(x, y, z) {
      this.centerDialogVisible = true;
      this.index = y;
      this.current = z;
    },
    del(id, index, row) {
      this.$confirm("确定删除吗", "警告", {
        type: "warning",
      }).then(() => {
        this.axios
          .delete("/api/v1/suggest/del", {
            data: {
              pid: row._id,
              uid: row.uid,
            },
          })
          .then((res) => {
            console.log(res);
            if (res.code == 1) {
              this.msg(res, this);
              this.$emit("replay", res.data, this.index);
            }
          });
      });
    },
  },
  created() {},
  mounted() {},
  components: {},
};
</script>
<style scoped>
.content {
  overflow: hiddedn;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>